import React from 'react';
import { Button, Switch, Space, Typography } from 'antd';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
import { useTheme } from '../../utils/ThemeContext';
const { Text } = Typography;
interface ThemeToggleProps {
	type?: 'button' | 'switch' | 'text';
	size?: 'small' | 'middle' | 'large';
	className?: string;
	showText?: boolean;
}

const ThemeToggle: React.FC<ThemeToggleProps> = ({
	type = 'switch',
	size = 'middle',
	className = '',
	showText = true
}) => {
	const { theme, toggleTheme } = useTheme();

	if (type === 'switch') {
		return (
			<Space align="center" className={className}>
				{showText && (
					<Text className="text-theme-secondary">
						{theme === 'dark' ? '夜间模式' : '白天模式'}
					</Text>
				)}
				<Switch
					checked={theme === 'dark'}
					onChange={toggleTheme}
					checkedChildren={<MoonOutlined />}
					unCheckedChildren={<SunOutlined />}
				// size={size === 'middle' ? 'default' : size}
				/>
			</Space>
		);
	}

	if (type === 'text') {
		return (
			<Button
				type="text"
				onClick={toggleTheme}
				size={size}
				className={`text-theme-secondary hover-text-theme-primary ${className}`}
			>
				<Space>
					{theme === 'dark' ? <SunOutlined /> : <MoonOutlined />}
					{showText && (theme === 'dark' ? '切换到白天' : '切换到夜间')}
				</Space>
			</Button>
		);
	}

	return (
		<Button
			type="text"
			icon={theme === 'dark' ? <SunOutlined /> : <MoonOutlined />}
			onClick={toggleTheme}
			size={size}
			className={`text-theme-secondary hover-text-theme-primary ${className}`}
			title={theme === 'dark' ? '切换到白天模式' : '切换到夜间模式'}
		/>
	);
};

export default ThemeToggle;
